import React, {CSSProperties, useEffect, useState} from 'react';
import UserConfig from './pages/UserConfig'
import PzscPage from './pages/PzscPage'
import KmzdscPage from './pages/KmzdscPage'
import KmyebscPage from './pages/KmyebscPage'
import XmyebscPage from './pages/XmyebscPage'
import WldwPage from './pages/WldwscPage'
import BmzdPage from './pages/BmzdscPage'
import XmzdscPage from './pages/XmzdscPage'
import NwWldwPage from './pages/NwWldwPage'
import NwBmzdPage from './pages/NwBmzdPage'
import NwKmzdPage from './pages/NwKmzdPage'
import NwKmyePage from './pages/NwKmyePage'
import NwXmzdPage from './pages/NwXmzdPage'
import NwXmyePage from './pages/NwXmyePage'
import 'antd/dist/reset.css';
import './App.css';
import backgroundImage from './images/bg_login@2x.620b6694f3f9b20eab97.png';
import backgroundImage2 from './images/form_bg@2x.2d429e6ecd7d2c432e6f.png';
import {BrowserRouter as Router, Routes, Route, Navigate, Link, useLocation, useNavigate} from 'react-router-dom';
import {Button, Layout, Menu, Modal} from 'antd';
import {QuestionCircleOutlined} from '@ant-design/icons';
import NwFymcPage from './pages/NwFymcPage'
import NwProjectPage from './pages/NwProjectPage'
import OperatePage from './pages/OperatePage'
import NwPzPage from "./pages/NwPzPage";
import FileUpload from "./pages/components/fileUpload/FileUpload";
import {request} from "./utils/requset";


import {useDispatch, useSelector} from 'react-redux'
import {loadSysConfig} from './store/modules/pzStore'
import store from './store'
import HelpText from "./pages/components/HelpText";

const {Header, Content, Footer} = Layout;

const App = () => {
    const backgroundStyle: CSSProperties = {
        backgroundImage: `url(${backgroundImage})`,
        backgroundSize: 'cover', // 使背景图片覆盖整个容器
        backgroundPosition: 'center', // 背景图片居中
        backgroundRepeat: 'no-repeat', // 防止背景图片重复
        minHeight: '100vh', // 确保背景图片覆盖整个视口高度
        display: 'flex',
        flexDirection: 'column'
    };
    const backgroundStyle2 = {
    backgroundImage: `url(${backgroundImage2})`,
    backgroundSize: 'cover', // 使背景图片覆盖整个容器
    backgroundPosition: 'center', // 背景图片居中
    backgroundRepeat: 'no-repeat', // 防止背景图片重复
    // minHeight: '100vh', // 确保背景图片覆盖整个视口高度
    // 其他您需要的样式
  };


    const dispatch = useDispatch()

    store.dispatch(loadSysConfig());
    // useEffect(()=>{
    //   // @ts-ignore
    //   dispatch(loadSysConfig());
    // },[dispatch]);

    return (
        <Router>
            {/*<GlobalPage />*/}
            <Layout style={{minHeight: '100vh'}}>
                <div style={backgroundStyle}>
                    <HeaderComponent/>
                    <Content style={{flex: 1, padding: '24px', margin: '0 16px', minHeight: 'calc(100vh - 64px)'}}>
                        {/* <div style={{...backgroundStyle2, minHeight: 'calc(100vh - 112px)'}}> */}
                            <Routes>
                                {/* 将根路径重定向到 /xyzn/rkdmx */}
                                <Route path="/robot" element={<Navigate replace to="/robot/test/upload"/>} key='/'/>

                                {/* /robot/rpa/pzsc */}
                                <Route path="/robot/rpa/pzsc" key='/robot/rpa/pzsc' element={<PzscPage/>}/>
                                <Route path="/robot/rpa/kmyebsc" key='/robot/rpa/kmyebsc' element={<KmyebscPage/>}/>
                                <Route path="/robot/rpa/xmyebsc" key='/robot/rpa/xmyebsc' element={<XmyebscPage/>}/>
                                <Route path="/robot/rpa/kmzdsc" key='/robot/rpa/kmzdsc' element={<KmzdscPage/>}/>
                                <Route path="/robot/rpa/xmzdsc" key='/robot/rpa/xmzdsc' element={<XmzdscPage/>}/>
                                <Route path="/robot/rpa/bmzdsc" key='/robot/rpa/bmzdsc' element={<BmzdPage/>}/>
                                <Route path="/robot/rpa/wldwsc" key='/robot/rpa/wldwsc' element={<WldwPage/>}/>

                                <Route path="/robot/rpa/nwkmyeb" key='/robot/rpa/nwkmyeb' element={<NwKmyePage/>}/>
                                <Route path="/robot/rpa/nwxmyeb" key='/robot/rpa/nwxmyeb' element={<NwXmyePage/>}/>
                                <Route path="/robot/rpa/nwkmzd" key='/robot/rpa/nwkmzd' element={<NwKmzdPage/>}/>
                                <Route path="/robot/rpa/nwxmzd" key='/robot/rpa/nwxmzd' element={<NwXmzdPage/>}/>
                                <Route path="/robot/rpa/nwbmzd" key='/robot/rpa/nwbmzd' element={<NwBmzdPage/>}/>
                                <Route path="/robot/rpa/nwwldw" key='/robot/rpa/nwwldw' element={<NwWldwPage/>}/>

                                {/* /robot/rpa/operate */}
                                <Route path="/robot/rpa/operate" key='/robot/rpa/operate' element={<OperatePage/>}/>

                                {/* /robot/rpa/nwproject */}
                                <Route path="/robot/rpa/nwproject" key='/robot/rpa/nwproject' element={<NwProjectPage/>}/>

                                {/* /robot/rpa/nwfymc */}
                                <Route path="/robot/rpa/nwfymc" key='/robot/rpa/nwfymc' element={<NwFymcPage/>}/>

                                {/* /robot/rpa/nwpz */}
                                <Route path="/robot/rpa/nwpz" key='/robot/rpa/nwpz' element={<NwPzPage/>}/>

                                {/* /robot/test/upload */}
                                <Route path="/robot/test/upload" key='/robot/test/upload' element={<FileUpload/>}/>

                                {/* 定义 /xyzn/config 路由 */}
                                <Route path="/robot/rpa/config" key='/robot/rpa/config' element={<UserConfig/>}/>

                                {/* 404 页面 */}
                                <Route path="*" key='*' element={<h1>404: 页面未找到</h1>}/>
                            </Routes>
                        {/* </div> */}
                    </Content>
                    <Footer style={{textAlign: 'center'}}>©2024 东方晨旭</Footer>
                </div>
            </Layout>
        </Router>
    );
};

const HeaderComponent = () => {
    // 控制帮助文档 Modal 的显示状态
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [dataType, setDataType] = useState('GS');
    useEffect(() => {
        fetchFyList();
    }, []);

    const fetchFyList = async () => {
        const response = await request.get('/rpa/config');
        const jsonData = response.data;
        setDataType(jsonData.databasetype)
    };
    // 打开 Modal
    const showModal = () => {
        setIsModalVisible(true);
    };

    // 关闭 Modal
    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const location = useLocation();
    const selectedKey = location.pathname === '/' ? '/robot/rpa/pzsc' : location.pathname;

    const navigator = useNavigate()
    const menuItems_gs = [

        {
            label: '数据上传',
            key: 'SubMenuSJSC',
            children: [
                {
                    label: '数据上传',
                    key: '/robot/test/upload'
                },
                {
                    label: '凭证上传',
                    key: '/robot/rpa/pzsc',
                },
                {
                    label: '科目年初上传',
                    key: '/robot/rpa/kmyebsc',
                },
                {
                    label: '项目年初上传',
                    key: '/robot/rpa/xmyebsc',
                },
                {
                    label: '科目字典上传',
                    key: '/robot/rpa/kmzdsc',
                },
                {
                    label: '项目字典上传',
                    key: '/robot/rpa/xmzdsc',
                },
                {
                    label: '部门字典上传',
                    key: '/robot/rpa/bmzdsc',
                },
                {
                    label: '往来单位上传',
                    key: '/robot/rpa/wldwsc',
                },
            ]
        },
        {
            label: '报表配置',
            key: 'SubMenuBBPZ',
            children: [
                {
                    label: '报表行配置',
                    key: '/robot/rpa/nwproject'
                },
                {
                    label: '报表列配置',
                    key: '/robot/rpa/nwfymc'
                },
            ]
        },
        {
            label: '报表生成',
            key: '/robot/rpa/operate',
        },
        {
            label: '数据查询',
            key: 'SubMenuSJCX',
            children: [
                {
                    label: '凭证查询',
                    key: '/robot/rpa/nwpz'
                },
                {
                    label: '科目年初查询',
                    key: '/robot/rpa/nwkmyeb'
                },
                {
                    label: '项目年初查询',
                    key: '/robot/rpa/nwxmyeb'
                },
                {
                    label: '科目字典查询',
                    key: '/robot/rpa/nwkmzd'
                },
                {
                    label: '项目字典查询',
                    key: '/robot/rpa/nwxmzd'
                },
                {
                    label: '部门字典查询',
                    key: '/robot/rpa/nwbmzd'
                },
                {
                    label: '往来单位查询',
                    key: '/robot/rpa/nwwldw'
                },
            ]
        },
        {
            label: '系统配置',
            key: '/robot/rpa/config',
        },
    ];
    const menuItems_u8 = [

        {
            label: '数据同步',
            key: '/robot/test/upload',
        },
        {
            label: '报表配置',
            key: 'SubMenuBBPZ',
            children: [
                {
                    label: '报表行配置',
                    key: '/robot/rpa/nwproject'
                },
                {
                    label: '报表列配置',
                    key: '/robot/rpa/nwfymc'
                },
            ]
        },
        {
            label: '报表生成',
            key: '/robot/rpa/operate',
        },
        {
            label: '数据查询',
            key: 'SubMenuSJCX',
            children: [
                {
                    label: '凭证查询',
                    key: '/robot/rpa/nwpz'
                },
                {
                    label: '科目年初查询',
                    key: '/robot/rpa/nwkmyeb'
                },
                {
                    label: '项目年初查询',
                    key: '/robot/rpa/nwxmyeb'
                },
                {
                    label: '科目字典查询',
                    key: '/robot/rpa/nwkmzd'
                },
                {
                    label: '项目字典查询',
                    key: '/robot/rpa/nwxmzd'
                },
                {
                    label: '部门字典查询',
                    key: '/robot/rpa/nwbmzd'
                },
                {
                    label: '往来单位查询',
                    key: '/robot/rpa/nwwldw'
                },
            ]
        },
        {
            label: '系统配置',
            key: '/robot/rpa/config',
        },
    ];
    const handleMenuClick = (e: any) => {
      console.log(e)
        navigator(e.key)
    };
    return (

        <Header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 20px'}}>
            <Menu theme="dark" mode="horizontal" selectedKeys={[selectedKey]} onClick={handleMenuClick}
                  items={dataType === 'GS' ? menuItems_gs : menuItems_u8}/>


            {/* 右侧帮助按钮 */}
            <Button
                type="text"
                icon={<QuestionCircleOutlined style={{fontSize: '20px', color: 'white'}}/>}
                onClick={showModal}
                title={"帮助"}
            />

            {/* 帮助文档 Modal */}
            <Modal
                title="帮助"
                open={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
                okText="Close"
                okButtonProps={{style: {display: 'none'}}}
                cancelButtonProps={{style: {display: 'none'}}}
                width={'80%'}
            >
                {/*<p>Welcome to the help section!</p>*/}
                {/*<p>{location.pathname}</p>*/}
                <HelpText currentPathname={location.pathname}/>
            </Modal>
        </Header>
    );
};

export default App;
